<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用slot分发内容__访问slot</title>
</head>
<body>

<div id="app">
    <children-component>
        <h2 slot="header">标题</h2>
        <p>正文内容</p>
        <p>更多的正文内容</p>
        <div slot="footer">底部信息</div>
    </children-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * Vue.js2.x提供了用来访问被slot分发的内容的方法$slots
     * **/


    /**
     * 通过$slots可以访问某个具名slot，this.$slots.default包括了所有没有被包含在具名slot中的节点。
     * $slots在业务中几乎用不到，在用render函数创建组件时会比较有用，但还是用于独立组件开发中。
     * **/
    Vue.component("children-component", {
        template: "<div class='container'>" +
            "<div class='header'><slot name='header'></slot></div>" +
            "<div class='main'><slot></slot></div>" +
            "<div class='footer'><slot name='footer'></slot></div>" +
            "</div>",
        mounted: function () {
            var header = this.$slots.header;
            var main = this.$slots.default;
            var footer = this.$slots.footer;
            console.log(footer);
            console.log(footer[0].elm.innerHTML);
        }
    });


    var app = new Vue({
        el: "#app"
    })
</script>
</body>
</html>
